9장 실습

HTML 태그에 리스너 작성

마우스 올리면 orchid 색으로 변경

DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록

마우스 올리면 lightblue 색으로 변경

addEventListener()를 이용한 리스너 등록

마우스 올리면 lightgreen 색으로 변경

익명 함수로 이벤트 리스너 작성

마우스 올리면 yellow 색으로 변경

이벤트 객체 전달받기

마우스를 올려보세요.

이벤트 객체의 프로퍼티 출력

버튼을 클릭하면 이벤트 객체를 출력합니다.

이벤트의 디폴트 행동 취소

네이버로 이동할 지 물어보는 링크

이벤트 흐름

이것은 문장입니다.

onclick 리스너로 계산기 만들기

계산하고자 하는 수식을 입력하고 계산 버튼을 눌러봐요.’

마우스 관련 리스너

마우스 관련 이벤트 가 발생합니다.

마우스 이벤트 객체의 프로퍼티와 onmousemove

이미지 위에 마우스를 움직일 때, onmousemove 리스너가 실행되고, 마우스의 위치를 보여줍니다.

oncontextmenu에서 컨텍스트 메뉴 금지

마우스 오른쪽 클릭은 금지됩니다. 아무곳이나 클릭해도 컨텍스트 메뉴를 볼 수 없습니다.

HTML 문서의 onload

HTML 문서의 로딩 완료, onload

이 페이지는 onload 리스너의 사용 예를 보여줍니다 이 페이지가 출력되고 난 바로 직후 onload 리스너를 통해 경고창을 출력합니다.

onload로 이미지 크기 출력

new image()로 이미지 로딩

이미지를 클릭하면 다음 이미지를 보여줍니다.

이름을 입력하지 않고 다른 창으로 이동할 수 없습니다.